<template>
  <div>
    <el-row :gutter="10">
    <!--第一个卡片-->
      <el-col :span="6">
        <el-card class="box-card">
          <div  class="clearfix">
            <Detail title="总销售额" :count="`￥ ${echartData.salesTotal}`">
              <template slot="echart" >
                <span style="margin-right: 30px">日同比
                  <span style="margin: 0px 5px">{{echartData.salesGrowthLastDay}}%
                <svg t="1662178557631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4993" width="14" height="14"><path d="M448 789.312V0h128v789.312l234.688-234.624L896 640l-384 384-384-384 85.312-85.312L448 789.312z" fill="#1afa29" p-id="4994"></path></svg>
                  </span>
                </span>
                <span>月同比
                  <span style="margin: 0px 5px">{{echartData.salesGrowthLastMonth}}%
                <svg t="1662178496583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3831" width="14" height="14"><path d="M576 234.688V1024H448V234.688L213.312 469.312 128 384l384-384 384 384-85.312 85.312L576 234.688z" fill="#d81e06" p-id="3832"></path></svg>
                  </span>
                </span>
              </template>
              <template slot="footer">
                <span>日销售额 ￥{{ echartData.salesToday }}</span>
              </template>
            </Detail>
          </div>
        </el-card>
      </el-col>
      <!-- 第二个卡片-->
      <el-col :span="6">
        <el-card class="box-card">
          <div  class="clearfix">
            <Detail title="总访问量" :count="echartData.visitTotal">
              <template slot="echart">
                <LineEchart :data="echartData.visitTrend"></LineEchart>
              </template>
              <template slot="footer">
                <span>日访问量 {{ echartData.visitToday }}</span>
              </template>
            </Detail>
          </div>
        </el-card>
      </el-col>
      <!-- 第三个卡片-->
      <el-col :span="6">
        <el-card class="box-card">
          <div  class="clearfix">
            <Detail title="支付笔数" :count="echartData.payTotal">
              <template slot="echart">
                <BarEchart :data="echartData.payTrend"></BarEchart>
              </template>
              <template slot="footer">
                <span>转换率 {{ echartData.payRate }}%</span>
              </template>
            </Detail>
          </div>
        </el-card>
      </el-col>
      <!-- 第四个卡片-->
      <el-col :span="6">
        <el-card class="box-card">
          <div  class="clearfix">
            <Detail title="运营活动效果" :count="`${echartData.activityRate}%`">
              <template slot="echart">
                <ProgressEchart :data="echartData.activityRate"></ProgressEchart>
              </template>
              <template slot="footer">
                <span>日同比 {{ echartData.activityGrowthLastDay }}%
                  <i class="el-icon-caret-bottom" style="color:green"></i>
<!--                <svg t="1662178496583" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3831" width="20" height="20"><path d="M576 234.688V1024H448V234.688L213.312 469.312 128 384l384-384 384 384-85.312 85.312L576 234.688z" fill="#1afa29" p-id="3832"></path></svg>-->
                      月同比 {{ echartData.activityGrowthLastMonth }}%
                  <i class="el-icon-caret-top" style="color:red"></i>
<!--                <svg t="1662178557631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4993" width="20" height="20"><path d="M448 789.312V0h128v789.312l234.688-234.624L896 640l-384 384-384-384 85.312-85.312L448 789.312z" fill="#d81e06" p-id="4994"></path></svg>-->
                </span>
              </template>
            </Detail>
          </div>
        </el-card>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import ProgressEchart from './ProgessEchart/ProgessEchart.vue'
import BarEchart from './BarEchart/index'
import LineEchart from "./LineEchart/LineEchart";
import Detail from "./Detail/index";
import {mapState} from "vuex";
export default {
  name: "Card",
  components:{
    Detail,
    LineEchart,
    BarEchart,
    ProgressEchart,
  },
  computed:{
    // echartData(){
    //   // return this.$store.state.home.echartData;
    // },
    ...mapState({
      echartData:(state)=>{
        return state.home.echartData;
      }
    })
  },
}
</script>

<style scoped>

</style>
